<template>
	<view class="container">
		<map id="test_map" ref="map1" style="width: 100%; height: 100%;display: flex;align-items: right;"
			:show-location="true" :longitude="longitude" :latitude="latitude" :markers="markers" show-compass="true"
			scale="20" @tap="tapMap">
			<cover-image class="cover-view" style="position: absolute;right: 20px;bottom: 20px;"
				src="../../../static/myLocation.png" @click="getCurrentLocation"></cover-image>
		</map>
	</view>
</template>

<script>
	import request from '../../../common/request'
	export default {
		data() {
			return {
				latitude: 0, // 纬度
				longitude: 0, // 经度
				markers: [], // 地图标记点
				mapId: -1,
			}
		},
		onLoad(option) {
			this.mapId = option.mapId
			this.initRoute()

		},
		methods: {
			initRoute() {
				//获取路线地图
				this.getRouteInfo()
			},
			getCurrentLocation() {
				console.log("获取当前位置")
				// 获取当前位置信息
				uni.getLocation({
					type: 'gcj02', // 使用国测局坐标系
					success: (res) => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.markers.push({
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '/static/locationpng.png', // 自定义标记图标
							width: 5,
							height: 5,
							label: {
								content: '当前位置',
								color: '#000',
								fontSize: 14,
								anchorX: -10,
								anchorY: -40,
							}
						})
					},
					fail: (err) => {
						console.error('获取位置失败', err);
						uni.showToast({
							title: '获取位置失败',
							icon: 'none',
						});
					},
				});
			},
			getRouteInfo() {
				//获取路线详情
				request(`/inspection/map/${this.mapId}`, 'GET').then(res => {
					console.log("获取所有点位信息")
					console.log(res)
					this.markers = res.data.data.map(item => ({
						id: item.mapDetailId,
						latitude: item.mapLatitude, 
						longitude: item.mapLongitude,
						iconPath: '/static/locationpng.png',
						width: 20, // 设置标记宽度
						height: 20, // 设置标记高度
						label: {
							content: item.mapDetailDesc, 
							color: '#000',
							fontSize: 14,
							anchorX: -10,
							anchorY: -40,
						}
					}))
					console.log("打印地图点位")
					console.log(this.markers)
					this.latitude = this.markers[0].latitude
					this.longitude = this.markers[0].longitude
					console.log(this.latitude+"  "+this.longitude)
				})
			}
		},
	}
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.cover-view {
		width: 35px;
		height: 35px;
		border-radius: 25px;
		background-color: rgba(255, 255, 255, 0.5);

	}
</style>